<template>
  <div class="depwrap">
    <el-tree
      :data="tableData"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      :expand-on-click-node="false"
      :default-expand-all="false"
      :check-strictly="false"
      ref="deptree"
      accordion
      :default-checked-keys="checkedIds"
      :default-expanded-keys="loadIds"
      @check-change="handleCheckChange"
    >
      <span class="custom-tree-node" slot-scope="{ data }">
        <span>{{ data.name }}</span>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listQuery: {
        pId: '0',
      },
      tableData: [],
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      checkedIds: [], //默认选中的菜单ID
      loadIds: [], //默认展开的菜单ID
    }
  },
  props: ['defaultVal'],
  mounted() {
    if (this.defaultVal) {
      this.checkedIds = this.defaultVal.split(',')
    }
    this.getList()
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch('queryTbDeptList', this.listQuery)
      this.tableData = res.data
      this.loadIds = [this.tableData[0].id]
    },
    handleCheckChange() {
      this.checkedIds = this.$refs.deptree.getCheckedKeys()
      this.$emit('emit', this.checkedIds)
    },
  },
}
</script>
<style scoped lang="scss">
.depwrap {
  border: 1px solid #dcdfe6;
  padding: 10px;
  max-height: 200px;
  overflow: auto;
  border-radius: 5px;
}
</style>